<template>
  <el-dialog title="请选择课程" :visible.sync="dialogVisible" width="900px"   :close-on-click-modal="false" append-to-body :modal-append-to-body="false" v-drag2anywhere @close="dialogVisible=false">
    <el-form :data="filterData" size="mini" label-width="80px">
      <el-row :gutter="30">
        <el-col style="width: 300px;">
          <el-form-item label="课程名称">
            <el-input v-model="filterData.title" placeholder="课程名称"></el-input>
          </el-form-item>
        </el-col>

        <el-col style="width: 300px;">
          <el-form-item label="授课方式">
            <el-input v-model="filterData.type" placeholder="授课方式"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" icon="el-icon-search" size="mini">查询</el-button>
        </el-col>
      </el-row>
    </el-form>

    <div style="height: 400px;">
      <el-table border :data="courseList" height="100%" @select="handleSelection">
          <el-table-column type="selection" label="序号" align="center"></el-table-column>
          <el-table-column label="课程名称" prop="title" align="center" width="200px"></el-table-column>
          <el-table-column label="授课方式" prop="type" align="center" width="100px">
            <template v-slot="scope">
              <span v-if="scope.row.type==1">一对多</span>
              <span v-if="scope.row.type==2">一对一</span>
              <span v-if="scope.row.type==3">预约</span>
            </template>
          </el-table-column>
          <el-table-column label="收费方式"  align="left">
              <template v-slot="scope">
               <div v-for="(item,index) in scope.row.rules" :key="index">
                  {{item.title}} 按{{item.unit}} ({{item.total}}元{{item.count}}{{item.unit}})
                  <span v-if="item.expvalue!=''">,有效期至 {{item.expvalue}}</span>
               </div>
              </template>
          </el-table-column>
      </el-table>
      <div style="display: flex;line-height: 30px;">
        <div style="flex: 1;">ddd</div>
        <div>
          <el-pagination class="pagination" prev-text="上一页" next-text="下一页" background
        layout=" prev, pager, next,sizes,total" :page-sizes="[20, 40, 60]" :total="numrows" :page-size="pagesize"
        :current-page="curpage" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
        </div>
      </div>

    </div>

    <div slot="footer" style="text-align: center;">
      <el-button @click="dialogVisible=false">取消</el-button>
      <el-button type="primary" @click="handleSave">确定选择</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        curpage:1,
        pagesize:15,
        numrows:1,
        dialogVisible: false,
        filterData:{
          title:"",
          type:""
        },
        selection:[],
        courseList:[]
      }
    },
    created(){
      this.loadDataList();
    },

    methods:{
      handleSizeChange: function(val) {
        this.pagesize = val;
        this.curpage = 1;
        this.loadDataList();
      },
      handleCurrentChange: function(val) {
        this.curpage = parseInt(val);
        this.loadDataList();
      },
      handleSelection(s){
        this.selection=s;
      },
      handleSave(){
         this.$emit("selecthandler",this.selection);
         this.dialogVisible=false;
       },
      loadDataList(){
          const params={
            curpage:this.curpage,
            pagesize:this.pagesize,
            title:this.filterData.title,
            type:this.filterData.type
          }
          this.api_helper.post("api/admin/educational/course/list_by_page", params).then(res => {
            if(res.status==200 && res.data.code==1){
              this.courseList=res.data.list;
            }

          });

      }
    }
  }
</script>

<style>
</style>
